<template>
	<div class="box">
		<div class="head">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{ path:'/broker' }"><span style="font-size: 18px;">经纪人管理</span>
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="main">
			<div class="top">
				<span style="margin-left: 10px;">搜索:</span>
				<input type="text" placeholder="请输入经纪人姓名/手机号" v-model="ss">
				<span style="margin-left: 30px;">状态:</span>
				<select v-model="set" style="width: 150px;">
					<option value="0">全部</option>
					<option value="1">在职</option>
					<option value="2">离职</option>
				</select>
				<button :class="isActive?'buttontwo':'button'" @click="seach()">查询</button>
				<button class="buttontwo" @click="newbuild">新建</button>
			</div>
			<div class="form">
				<template>
					<el-table :data="tableData" style="width: 100%;">
						<el-table-column prop="id" label="序号" width="180">
						</el-table-column>
						<el-table-column prop="name" label="姓名" width="180">
						</el-table-column>
						<el-table-column prop="phone" label="手机号">
						</el-table-column>
						<el-table-column prop="company_name" label="公司">
						</el-table-column>
						<el-table-column prop="state1" label="新房">
						</el-table-column>
						<el-table-column prop="state2" label="二手房">
						</el-table-column>
						<el-table-column prop="state3" label="租房">
						</el-table-column>
						<el-table-column prop="state" label="状态">
							<template slot-scope="scope">
								<span class="jr">{{scope.row.state==1?'在职':'离职'}}</span>
							</template>
						</el-table-column>
						<el-table-column prop="cz" label="操作">
							<template slot-scope="scope">
								<span class="jr" @click="compile(scope.row.id,scope.row)">编辑</span>
								<span class="jr" @click="del(scope.row.id)">删除</span>
								<span class="jr" @click="start(scope.row.id,1)">启用</span>
								<span class="jr" @click="start(scope.row.id,2)">禁用</span>
							</template>
						</el-table-column>
					</el-table>
				</template>
			</div>
			<el-dialog title="新增/编辑经纪人" :visible.sync="dialogFormVisible">
				<el-form :model="form">
					<el-form-item label="">
						<el-input v-model="form.name" autocomplete="off" placeholder="请输入经纪人姓名"></el-input>
					</el-form-item>
					<el-form-item label="">
						<el-input v-model="form.phone" autocomplete="off" placeholder="请输入经纪人手机号"></el-input>
					</el-form-item>
					<el-form-item label="">
						<el-input v-model="form.password" autocomplete="off" placeholder="请输入密码"></el-input>
					</el-form-item>
					<el-form-item label="">
						<el-select v-model="form.company" placeholder="所属公司" style="width: 100%;">
							<el-option v-for="item in companylist" :label="item.company_name" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="save">保 存</el-button>
				</div>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	import md5 from 'js-md5';
	export default {
		data() {
			return {
				tableData: [],
				set: 0,
				ss: '',
				isActive: false,
				dialogFormVisible: false,
				form: {
					name: '',
					phone: '',
					password: '',
					company: ''
				},
				companylist: [],
				isup: false,
				id: ''
			}
		},
		watch: {
			ss(e) {
				if (e.length > 0) {
					this.isActive = true
				} else {
					this.isActive = false
				}
			},
			set(e) {
				if (e.length > 0) {
					this.isActive = true
				} else {
					this.isActive = false
				}
			}
		},
		mounted() {
			this.getbrokerlist()
		},
		methods: {
			save() {
				this.dialogFormVisible = false
				console.log(this.form)
				console.log(this.isup)

				if (this.isup) { //判断添加还是修改
					var _this = this
					axios.post('/setbroker', {
						id: this.id,
						name: this.form.name,
						phone: this.form.phone,
						password: this.form.password,
						company: this.form.company
					}).then(function(res) {
						console.log(res)
						if (res.data.code == 200) {
							_this.getbrokerlist()
							_this.form = {}
							_this.id = ''
							_this.isup = false
							_this.$message({
								message: res.data.msg
							})
						}

					})
				} else {
					var _this = this
					axios.post('/addbroker', {
						name: this.form.name,
						phone: this.form.phone,
						password: this.form.password,
						company: this.form.company
					}).then(function(res) {
						console.log(res)
						if (res.data.code == 200) {
							_this.getbrokerlist()
							_this.form = {}
							_this.$message({
								message: res.data.msg
							})
						}

					})
				}

			},
			newbuild() {
				this.dialogFormVisible = true
				this.getcompany()
			},
			getcompany() {
				var _this = this
				axios.get('/getcompany').then(function(res) {
					console.log(res)
					_this.companylist = res.data.res
				})
			},
			getbrokerlist() {
				var _this = this
				axios.get('/getbrokerlist').then(function(res) {
					console.log(res)
					_this.tableData = res.data.res
				})
			},
			seach() {
				var _this = this
				// console.log(this.set)
				axios.get('/getbrokerlist', {
					params: {
						ss: this.ss,
						set: this.set
					}
				}).then(function(res) {
					console.log(res)
					_this.tableData = res.data.res
				})
			},
			del(id) {
				console.log(id)
				var _this = this
				axios.get('/delbroker', {
					params: {
						id
					}
				}).then(function(res) {
					console.log(res)
					_this.getbrokerlist()
				})
			},
			compile(id, data) {
				console.log(id)
				this.dialogFormVisible = true
				this.form = data
				this.getcompany()
				this.isup = true
				this.id = id
			},
			start(id, state) {
				console.log(state)
				console.log(id)
				var _this = this
				axios.post('/setbrokerstate', {
					id,
					state
				}).then(function(res) {
					console.log(res)
					_this.getbrokerlist()
				})
			}
		}
	}
</script>

<style scoped>
	.box {
		width: 100%;
		height: 80%;
	}

	.head {
		width: 100%;
		height: 5%;
	}

	.top {
		width: 100%;
		height: 60px;
		line-height: 60px;
		text-align: left;
	}

	/deep/.el-dialog {
		width: 30%;
	}

	/deep/ .el-table thead th.el-table__cell {
		background-color: #f5f5f5;
		text-align: center;
	}

	/deep/ .el-table--enable-row-transition .el-table__body td.el-table__cell {
		text-align: center;
	}

	/deep/ .el-table td.el-table__cell,
	.el-table th.el-table__cell.is-leaf {
		border: 1px solid #EBEEF5;
		;
	}

	.main {
		width: 100%;
		height: 700px;
		background: #FFFFFF;
	}

	.jr {
		color: #6e9eec;
		margin-left: 10px;
		text-decoration: none;
	}

	.button {
		margin-left: 10px;
		background: gray;
		color: #fff;
		border: none;
	}

	.buttontwo {
		margin-left: 15px;
		background: #0099FF;
		color: #fff;
		border: none;
	}

	.add {
		width: 400px;
		height: 500px;
		background: red;
	}
</style>
